Chart.js এর অন্যান্য এক্সটেনশন

Chart.js একটি জনপ্রিয় লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন জন্য ব্যাপকভাবে ব্যবহৃত হয়। এটি বিভিন্ন ধরনের চার্ট তৈরি করার জন্য ব্যবহার করা হয়, তবে এর সীমাবদ্ধতাও রয়েছে। এই সীমাবদ্ধতা কাটিয়ে উঠতে এবং Chart.js এর ক্ষমতা বাড়াতে অনেক এক্সটেনশন বা প্লাগইন তৈরি করা হয়েছে। এসব এক্সটেনশন Chart.js এর ফিচারসমূহ বাড়ায় এবং নতুন নতুন কার্যকারিতা যুক্ত করে।

এই এক্সটেনশনগুলি ব্যবহার করে আপনি আপনার চার্টে অ্যানিমেশন, ইন্টার‌্যাকটিভ ফিচার, কাস্টম টুলটিপ, লেজেন্ড, স্কেল কাস্টমাইজেশন, এবং আরো অনেক কিছু যোগ করতে পারবেন।

নিচে কিছু জনপ্রিয় Chart.js এক্সটেনশন এর পরিচিতি দেওয়া হলো:

১. Chart.js Data Labels

Chart.js Data Labels প্লাগইন Chart.js এর চার্টে ডেটা লেবেলগুলি দেখানোর জন্য ব্যবহৃত হয়। এই প্লাগইন দিয়ে আপনি আপনার চার্টের প্রতিটি ডেটা পয়েন্টের উপর সরাসরি ডেটা লেবেল বা সংখ্যা প্রদর্শন করতে পারেন, যা চার্টের তথ্য আরও পরিষ্কার করে তোলে।

ব্যবহার:

• বার চার্ট, পাই চার্ট, ডোনাট চার্ট ইত্যাদিতে ডেটার মান দেখাতে।

ইনস্টলেশন:

npm install chartjs-plugin-datalabels

কোড উদাহরণ:

Chart.plugins.register(ChartDataLabels);

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        plugins: {
            datalabels: {
                anchor: 'end', // Position of the labels
                align: 'top', // Align the labels
                font: {
                    weight: 'bold',
                    size: 14
                }
            }
        }
    }
});

২. Chart.js Annotation Plugin

Chart.js Annotation Plugin Chart.js এর মধ্যে অ্যানোটেশন (এমতঃ ফিচার) যোগ করার জন্য ব্যবহৃত হয়। এটি আপনাকে আপনার চার্টে লাইনের মাধ্যমে আন্ডারলাইন, লাইন বা এলাকা হাইলাইট করতে সক্ষম করে।

ব্যবহার:

• চার্টে লাইন, আন্ডারলাইন, রেকটেঙ্গল বা পয়েন্ট অ্যানোটেশন যোগ করা।
• কোনো গুরুত্বপূর্ণ ডেটা পয়েন্ট বা বিভাগকে হাইলাইট করা।

ইনস্টলেশন:

npm install chartjs-plugin-annotation

কোড উদাহরণ:

Chart.plugins.register(ChartAnnotation);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            borderColor: 'rgba(54, 162, 235, 1)',
            fill: false
        }]
    },
    options: {
        annotations: {
            annotations: [{
                type: 'line',
                mode: 'vertical',
                scaleID: 'x',
                value: 'March',
                borderColor: 'red',
                borderWidth: 2
            }]
        }
    }
});

৩. Chart.js Zoom and Pan

Chart.js Zoom and Pan প্লাগইন দিয়ে আপনি চার্টের মধ্যে জুম ইন/আউট এবং প্যান করার ফিচার যোগ করতে পারেন। এটি আপনার চার্টে ডেটা বিশ্লেষণের জন্য ইন্টার‌্যাকটিভ ফিচার যোগ করে, বিশেষ করে যখন বড় ডেটাসেট থাকে।

ব্যবহার:

• ডেটা বিশ্লেষণ সহজ করতে জুম ইন/আউট।
• ডেটার মধ্যে প্যানিং।

ইনস্টলেশন:

npm install chartjs-plugin-zoom

কোড উদাহরণ:

Chart.plugins.register(ChartZoom);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3, 12],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'xy'
                },
                zoom: {
                    enabled: true,
                    mode: 'xy'
                }
            }
        }
    }
});

৪. Chart.js Regessions

Chart.js Regessions প্লাগইন Chart.js এর সাহায্যে রিগ্রেশন (যেমন লিনিয়ার রিগ্রেশন) রেখা প্রদর্শন করতে সহায়তা করে। এটি ডেটার একটি প্রবণতা দেখাতে সহায়ক।

ব্যবহার:

• ডেটার প্রবণতা বা ট্রেন্ড দেখানোর জন্য রিগ্রেশন রেখা যোগ করা।

ইনস্টলেশন:

npm install chartjs-chart-regression

কোড উদাহরণ:

Chart.plugins.register(ChartRegressions);

const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{ x: 1, y: 1 }, { x: 2, y: 4 }, { x: 3, y: 9 }],
            backgroundColor: 'rgba(75, 192, 192, 1)'
        }]
    },
    options: {
        plugins: {
            regression: {
                type: 'linear',
                lineColor: 'red',
                lineWidth: 3
            }
        }
    }
});

৫. Chart.js Plugin for Filler

Chart.js Filler Plugin ব্যবহার করে আপনি বার বা আন্ডারলাইন চার্টে ফিল যুক্ত করতে পারেন। এটি চার্টের নিচের অংশে বা ভিতরে রং দিয়ে একটি ভরাট (fill) যোগ করে।

ব্যবহার:

• চার্টে ফিল বা পূর্ণতা যোগ করা, যেমন একটি এলাকা রঙিন বা পূর্ণ করা।

ইনস্টলেশন:

npm install chartjs-plugin-filler

কোড উদাহরণ:

Chart.plugins.register(ChartFiller);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            fill: true, // Enable fill
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2
        }]
    }
});

সারাংশ

Chart.js এর এক্সটেনশন বা প্লাগইনগুলি Chart.js এর ক্ষমতাকে বিস্তৃত করে এবং বিভিন্ন নতুন ফিচার যোগ করতে সহায়ক। উপরোক্ত এক্সটেনশনগুলি ব্যবহার করে আপনি:

• ডেটা লেবেল যোগ করতে পারেন (Chart.js Data Labels),
• চার্টে অ্যানোটেশন এবং লাইনের মাধ্যমে হাইলাইট যোগ করতে পারেন (Chart.js Annotation),
• চার্টে জুম এবং প্যান ফিচার যুক্ত করতে পারেন (Chart.js Zoom and Pan),
• রিগ্রেশন রেখা প্রদর্শন করতে পারেন (Chart.js Regression),
• এবং আরো অনেক কাস্টমাইজেশন করতে পারেন।

এই এক্সটেনশনগুলি আপনাকে Chart.js কে আরও শক্তিশালী এবং ইন্টার‌্যাকটিভ করতে সাহায্য করবে।